import React, { Component } from 'react'
// import qs from 'querystring'
import {useParams,useSearchParams,useLocation} from 'react-router-dom'
//react-router-domv6 useParams用于接收params参数，useSearchParams用于接收search参数
// export default class Detail extends Component {
//   state={
//     detailDate:[
//       {id:1,content:'qwert'},
//       {id:2,content:'asdfg'},
//       {id:3,content:'zxcvb'},
//     ]
//   }
//   render() {
//     console.log(this.props);
//     // const {id,title}=this.props.match.params /*接收params参数*/ 
//     // const {search}=this.props.location /*接收search参数*/ 
//     const {id,title}=this.props.location.state
//     // const {id,title}=qs.parse(search.slice(1))
//     const obj=this.state.detailDate.find((val)=>{
//       return String(val.id)===String(id)
//     })
//     return (
//       <div>
//         <h1>ID:{id}</h1>
//         <h1>TITLE:{title}</h1>
//         <h1>CONTENT:{obj.content}</h1>
//       </div>
//     )
//   }
// }

export default function Detail() {
  //v6传递参数params参数
  const{id,title}=useParams()
  //v6传递参数search参数
  // const [search,setSearch]=useSearchParams()
  // const id=search.get('id')
  //v6传递参数state参数
  // const {state:{id,title}}=useLocation()
  return (
    <div>
      <div>
         <h1>ID:{id}</h1>
         <h1>TITLE:{title}</h1>
       </div>
    </div>
  )
}
